<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <style>
        *{
            margin:0;
            padding: 0;
            box-sizing:border-box;
        }
        .clearfix:after{
            display:table;
            content:"";
            clear:both;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .icon-home:before {
            content:none;
        }
        .icon-me:before {
            content: none;
        }
        .icon-star:before {
            content:none;
        }
        .icon-settings:before {
            content:none;
        }
        .content{
            overflow-y:auto;
        }
        .top{
            background:#fff;
            border-radius: 0.4rem;
            margin:0.3rem;
            padding:0.3rem;

        }
        .card{
            position:relative;
            vertical-align:middle;
            background: #f55601;
            height:8.8rem;
            margin:0;
            border-radius: 0.2rem;

        }
        .txt1{
            font-size: 12px;
            color:#fff;
            padding-top: 0.4rem;
            padding-left: 0.1rem;
        }
        .toux{
            position:absolute;
            left:34%;
            top:2.2rem;
            text-align: center;
        }
        .toux p{
            line-height:1rem;
            height:1rem;
            font-size: 14px;

            color:#fff;
            margin:0;
        }
        .card .pic2{
            position:absolute;
            right:0.5rem;
            top:0.5rem;
        }
        .card .num{
            position: absolute;
            right:0.5rem;
            bottom:0.3rem;
            color:#fff;
            font-size: 14px;
        }
        .info{

            text-align: center;
        }
        .info1{
            width:25%;
            font-size:14px;
        }
        .info1 img{
            margin:1rem 0 0.3rem 0;

        }
        .info1 p{
            margin:0.3rem;
        }
        .section1,.section2,.section3{
            margin:0.3rem;
            padding:0.3rem;
            background:#fff;
            border-radius: 0.2rem;
        }
        .section1 .dingdan1{
            padding:0.2rem;
            border-bottom:1px solid #ccc;
            font-size: 14px;
        }

        .section1 .dingdan2 .pic1{
            width:20%;
            font-size:14px;
            padding:0.4rem 0 0.2rem 0;
            text-align: center;
            vertical-align: middle;
        }
        .section2 img{
            vertical-align: middle;
            margin:0 0.2rem;
            width:1.4rem;
        }
        .section2 .pic3{
            height:2.2rem;
            line-height:2.2rem;
            font-size: 14px;
        }
        .section3 img{
            vertical-align: middle;
            margin:0 0.2rem;
            width:1.4rem;
        }
        .section3 .pic4{
            height:2.2rem;
            line-height:2.2rem;
            font-size: 14px;
        }
    </style>
</head>
<body>


<div class="page-group">
    <div class="page page-current">
        <!-- 你的html代码 -->
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">我的歌瑞森</h1>
        </header>

        <nav class="bar bar-tab">
            <a class="tab-item active" id="index">
                <span class="icon icon-home"><img src="images/11.png" style="width:1.4rem"/></span>
                <span class="tab-label" style="color:#a7a7a8">首页</span>
            </a>
            <a class="tab-item" id="select">
                <span class="icon icon-me"><img src="images/22.png" style="width:1.4rem"/></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item" id="shopcar">
                <span class="icon icon-star"><img src="images/33.png" style="width:1.4rem"/></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item" id="me">
                <span class="icon icon-settings"><img src="images/44.png" style="width:1.4rem"/></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>

        <div class="content">
            <div class="top">
                <div class="card">
                    <div class="toux"><img src="images/touxiang.png" style="width:4rem"/>
                       <p>小豆子666</p>
                       <p>会员积分：668</p>
                    </div>
                    <div class="txt1"><img src="images/logo.png" style="width:5rem" /></div>
                    <div class="pic2">
                        <img src="images/shezhi.png" style="width:1rem" />
                        <img src="images/xaioxi.png" style="width:1rem" />
                    </div>
                    <div class="num">E6471 258</div>
                </div>
                <div class="info clearfix">
                    <div class="info1 fl">
                        <img src="images/shangpingshoucang.png" style="width:1.4rem" />
                        <p>商品收藏</p>
                    </div>
                    <div class="info1 fl">
                        <img src="images/dianpushouchang.png" style="width:1.4rem" />
                        <p>关注店铺</p>
                    </div>
                    <div class="info1 fl">
                        <img src="images/wodezuji.png" style="width:1.4rem" />
                        <p>我的足迹</p>
                    </div>
                    <div class="info1 fl">
                        <img src="images/daingdan.png" style="width:1.3rem" />
                        <p>红包卡券</p>
                    </div>
                </div>
            </div>

            <div class="section1">
                <div class="dingdan1 clearfix">
                    <div class="fl" style="font-weight:bold">我的订单</div>
                    <div class="fr" style="font-size:12px">共462单></div>
                </div>
                <div class="dingdan2 clearfix">
                    <div class="pic1 fl">
                        <div><img src="images/daifahuo.png" style="width:1.4rem"/></div>
                        <div>待付款</div>
                    </div>
                    <div class="pic1 fl">
                        <div><img src="images/daifukuan.png" style="width:1.4rem"/></div>
                        <div>待发货</div>
                    </div>
                    <div class="pic1 fl">
                        <div><img src="images/daishouhuo.png" style="width:1.5rem"/></div>
                        <div>待收货</div>
                    </div>
                    <div class="pic1 fl">
                        <div><img src="images/daipingjia.png" style="width:1.4rem"/></div>
                        <div>待评价</div>
                    </div>
                    <div class="pic1 fl">
                        <div><img src="images/tuikuanshouhou.png" style="width:1.6rem"/></div>
                        <div>退款/售后</div>
                    </div>
                </div>
            </div>
            <div class="section2">
                    <div class="pic3"><img src="images/hongbao.png" />邀请好友最高可得20元</div>
                    <div class="pic3"><img src="images/jiandao.png" />签到领金币</div>
                    <div class="pic3"><img src="images/pingjia.png" />我的评价</div>
                    <div class="pic3"><img src="images/yohuijuan.png" />领劵中心</div>
                    <div class="pic3"><img src="images/jifenduihuan.png" />我的礼物</div>
                    <div class="pic3"><img src="images/dengji.png" />我的等级</div>
            </div>
            <div class="section3">
                <div class="pic4"><img src="images/gefu.png" />联系客服</div>
                <div class="pic4"><img src="images/yijian.png" />意见反馈</div>
            </div>



    </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

</body>
</html>


